<template>
  <TabLayout>
    <NumberInfo :number-info="numberInfo"></NumberInfo>
    <AlertCalendar v-model:date="date" :mark-object="markObject" @change="handleChange"
                   @select="handleSelect"></AlertCalendar>
  </TabLayout>
</template>
<script setup lang="ts">

import TabLayout from "@/pages/product/components/TabLayout.vue";
import NumberInfo from "@/pages/product/home/components/NumberInfo.vue";
import AlertCalendar from "@/pages/product/home/components/AlertCalendar.vue";
import MyDayjs from "@/utils/common/myDayjs";
import {computed, onMounted, ref} from "vue";
import api from "@/api";
import {onPullDownRefresh} from "@dcloudio/uni-app";

const expiredList = ref([])
const date = ref(MyDayjs().format('YYYY-MM-DD'))
const markObject = computed(() => {
  return {
    color: 'red',
    days: expiredList.value,
    desc: '过期  '
  }
})
const numberInfo = ref(<ICountInfo>{})
onMounted(() => {
  getExpiredList()
  getBaseInfo()
})

const getExpiredList = () => {
  api.expiry.getMonthExpiryDateList({
    date: MyDayjs(date.value).format('YYYY-MM-DD')
  }).then((res: any) => {
    console.log(res)
    if (res.data.code === 0) {
      let tmp = res.data.data
      expiredList.value = tmp.map((item: any) => {
        return MyDayjs(item.expiryDate).format('YYYY-MM-DD')
      })
    }
  })
}

const handleChange = (val: any) => {
  getExpiredList()
}

const handleSelect = (date: string, total: number) => {
  if (total > 0) {
    uni.navigateTo({
      url: `/pages/product/home/dateProductList?date=${date}&total=${total}`
    })
  }
}
const getBaseInfo = () => {
  api.product.getBaseInfo().then((res: any) => {
    if (res.data.code === 0) {
      numberInfo.value = res.data.data
    }
  })
}

onPullDownRefresh(()=> {
  getExpiredList()
  getBaseInfo()
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 200);
})
</script>


<style scoped>

</style>